.bounce,.bounce-hover,.flash,.flash-hover,.ring,.ring-hover,.shake,.shake-hover,.swing,.swing-hover,.wobble,.wobble-hover{-webkit-animation:1s ease;animation:1s ease}
.bouncein,.fadein,.fadein-bottom,.fadein-left,.fadein-right,.fadein-top,.rotatein{-webkit-animation:1s ease-out backwards;animation:1s ease-out backwards}
.bounceout,.fadeout,.fadeout-bottom,.fadeout-left,.fadeout-right,.fadeout-top,.rotateout{-webkit-animation:1s ease-in forwards;animation:1s ease-in forwards}
.rotate,.rotate-hover{-webkit-animation:2s infinite linear;animation:2s infinite linear;display:inline-block}
.fadein{-webkit-animation-name:a-fadein;animation-name:a-fadein}
@-webkit-keyframes a-fadein{0%{opacity:0}
to{opacity:1}
}
@keyframes a-fadein{0%{opacity:0}
to{opacity:1}
}
.fadein-top{-webkit-animation-name:fadeinT;animation-name:fadeinT}
@-webkit-keyframes fadeinT{0%{opacity:0;-webkit-transform:translateY(-50px)}
to{opacity:1;-webkit-transform:translateY(0)}
}
@keyframes fadeinT{0%{opacity:0;transform:translateY(-50px)}
to{opacity:1;transform:translateY(0)}
}
.fadein-right{-webkit-animation-name:fadeinR;animation-name:fadeinR}
@-webkit-keyframes fadeinR{0%{opacity:0;-webkit-transform:translateX(50px)}
to{opacity:1;-webkit-transform:translateX(0)}
}
@keyframes fadeinR{0%{opacity:0;transform:translateX(50px)}
to{opacity:1;transform:translateX(0)}
}
.fadein-bottom{-webkit-animation-name:fadeinB;animation-name:fadeinB}
@-webkit-keyframes fadeinB{0%{opacity:0;-webkit-transform:translateY(50px)}
to{opacity:1;-webkit-transform:translateY(0)}
}
@keyframes fadeinB{0%{opacity:0;transform:translateY(50px)}
to{opacity:1;transform:translateY(0)}
}
.fadein-left{-webkit-animation-name:fadeinL;animation-name:fadeinL}
@-webkit-keyframes fadeinL{0%{opacity:0;-webkit-transform:translateX(-50px)}
to{opacity:1;-webkit-transform:translateX(0)}
}
@keyframes fadeinL{0%{opacity:0;transform:translateX(-50px)}
to{opacity:1;transform:translateX(0)}
}
.fadeout{-webkit-animation-name:a-fadeout;animation-name:a-fadeout}
@-webkit-keyframes a-fadeout{0%{opacity:1}
to{opacity:0}
}
@keyframes a-fadeout{0%{opacity:1}
to{opacity:0}
}
.fadeout-top{-webkit-animation-name:fadeoutT;animation-name:fadeoutT}
@-webkit-keyframes fadeoutT{0%{opacity:1;-webkit-transform:translateY(0)}
to{opacity:0;-webkit-transform:translateY(-100px)}
}
@keyframes fadeoutT{0%{opacity:1;transform:translateY(0)}
to{opacity:0;transform:translateY(-100px)}
}
.fadeout-right{-webkit-animation-name:fadeoutR;animation-name:fadeoutR}
@-webkit-keyframes fadeoutR{0%{opacity:1;-webkit-transform:translateX(0)}
to{opacity:0;-webkit-transform:translateX(100px)}
}
@keyframes fadeoutR{0%{opacity:1;transform:translateX(0)}
to{opacity:0;transform:translateX(100px)}
}
.fadeout-bottom{-webkit-animation-name:fadeoutB;animation-name:fadeoutB}
@-webkit-keyframes fadeoutB{0%{opacity:1;-webkit-transform:translateY(0)}
to{opacity:0;-webkit-transform:translateY(100px)}
}
@keyframes fadeoutB{0%{opacity:1;transform:translateY(0)}
to{opacity:0;transform:translateY(100px)}
}
.fadeout-left{-webkit-animation-name:fadeoutL;animation-name:fadeoutL}
@-webkit-keyframes fadeoutL{0%{opacity:1;-webkit-transform:translateX(0)}
to{opacity:0;-webkit-transform:translateX(-100px)}
}
@keyframes fadeoutL{0%{opacity:1;transform:translateX(0)}
to{opacity:0;transform:translateX(-100px)}
}
.bounce,.bounce-hover:hover{-webkit-animation-name:a-bounce;animation-name:a-bounce}
@-webkit-keyframes a-bounce{0%,20%,50%,80%,to{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-30px)}
60%{-webkit-transform:translateY(-15px)}
}
@keyframes a-bounce{0%,20%,50%,80%,to{transform:translateY(0)}
40%{transform:translateY(-30px)}
60%{transform:translateY(-15px)}
}
.bouncein{-webkit-animation-name:a-bouncein;animation-name:a-bouncein}
@-webkit-keyframes a-bouncein{0%{opacity:0;-webkit-transform:scale(.3)}
50%{opacity:1;-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
to{-webkit-transform:scale(1)}
}
@keyframes a-bouncein{0%{opacity:0;transform:scale(.3)}
50%{opacity:1;transform:scale(1.05)}
70%{transform:scale(.9)}
to{transform:scale(1)}
}
.bounceout{-webkit-animation-name:a-bounceout;animation-name:a-bounceout}
@-webkit-keyframes a-bounceout{0%{-webkit-transform:scale(1)}
25%{-webkit-transform:scale(.95)}
50%{opacity:1;-webkit-transform:scale(1.1)}
to{opacity:0;-webkit-transform:scale(.3)}
}
@keyframes a-bounceout{0%{transform:scale(1)}
25%{transform:scale(.95)}
50%{opacity:1;transform:scale(1.1)}
to{opacity:0;transform:scale(.3)}
}
.rotatein{-webkit-animation-name:a-rotatein;animation-name:a-rotatein}
@-webkit-keyframes a-rotatein{0%{opacity:0;-webkit-transform:rotate(-200deg)}
to{opacity:1;-webkit-transform:rotate(0)}
}
@keyframes a-rotatein{0%{opacity:0;transform:rotate(-200deg)}
to{opacity:1;transform:rotate(0)}
}
.rotateout{-webkit-animation-name:a-rotateout;animation-name:a-rotateout}
@-webkit-keyframes a-rotateout{0%{-webkit-transform:rotate(0);opacity:1}
0%,to{-webkit-transform-origin:center center}
to{-webkit-transform:rotate(200deg);opacity:0}
}
@keyframes a-rotateout{0%{transform-origin:center center;transform:rotate(0);opacity:1}
to{transform-origin:center center;transform:rotate(200deg);opacity:0}
}
.flash,.flash-hover:hover{-webkit-animation-name:a-flash;animation-name:a-flash}
@-webkit-keyframes a-flash{0%,50%,to{opacity:1}
25%,75%{opacity:0}
}
@keyframes a-flash{0%,50%,to{opacity:1}
25%,75%{opacity:0}
}
.shake,.shake-hover:hover{-webkit-animation-name:a-shake;animation-name:a-shake}
@-webkit-keyframes a-shake{0%,to{-webkit-transform:translateX(0)}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
20%,40%,60%,80%{-webkit-transform:translateX(10px)}
}
@keyframes a-shake{0%,to{transform:translateX(0)}
10%,30%,50%,70%,90%{transform:translateX(-10px)}
20%,40%,60%,80%{transform:translateX(10px)}
}
.swing,.swing-hover:hover{-webkit-animation-name:a-swing;animation-name:a-swing}
@-webkit-keyframes a-swing{20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
to{-webkit-transform:rotate(0)}
}
@keyframes a-swing{20%{transform:rotate(15deg)}
40%{transform:rotate(-10deg)}
60%{transform:rotate(5deg)}
80%{transform:rotate(-5deg)}
to{transform:rotate(0)}
}
.wobble,.wobble-hover:hover{-webkit-animation-name:a-wobble;animation-name:a-wobble}
@-webkit-keyframes a-wobble{0%{-webkit-transform:translateX(0)}
15%{-webkit-transform:translateX(-50px) rotate(-5deg)}
30%{-webkit-transform:translateX(40px) rotate(3deg)}
45%{-webkit-transform:translateX(-33px) rotate(-3deg)}
60%{-webkit-transform:translateX(10px) rotate(2deg)}
75%{-webkit-transform:translateX(-10px) rotate(-1deg)}
to{-webkit-transform:translateX(0)}
}
@keyframes a-wobble{0%{transform:translateX(0)}
15%{transform:translateX(-50px) rotate(-5deg)}
30%{transform:translateX(40px) rotate(3deg)}
45%{transform:translateX(-33px) rotate(-3deg)}
60%{transform:translateX(10px) rotate(2deg)}
75%{transform:translateX(-10px) rotate(-1deg)}
to{transform:translateX(0)}
}
.ring,.ring-hover:hover{-webkit-animation-name:a-ring;animation-name:a-ring}
@-webkit-keyframes a-ring{0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
to{-webkit-transform:scale(1) rotate(0)}
}
@keyframes a-ring{0%{transform:scale(1)}
10%,20%{transform:scale(.9) rotate(-3deg)}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
to{transform:scale(1) rotate(0)}
}
.rotate,.rotate-hover:hover{-webkit-animation-name:a-rotate;animation-name:a-rotate}
@-webkit-keyframes a-rotate{0%{-webkit-transform:rotate(0)}
to{-webkit-transform:rotate(359deg)}
}
@keyframes a-rotate{0%{transform:rotate(0)}
to{transform:rotate(359deg)}
}